<template>
  <custom-dialog
    ref="dialog" title="明细" height="500px" width="80%"
    :show-confirm-button="false" show-cancel-button cancel-button-text="关闭"
  >
    <el-tabs v-model="currentTab" @tab-click="onTabClick">
      <el-tab-pane name="tab1">
        <span slot="label">
          <svg-icon name="robot" class="font-large"></svg-icon>
          全厂
        </span>
      </el-tab-pane>
      <el-tab-pane name="tab2">
        <span slot="label">
          <svg-icon name="salescenter" class="font-large"></svg-icon>
          工序单元
        </span>
      </el-tab-pane>
    </el-tabs>
    <div v-loading="loading" class="tab-content">
      <template v-if="currentTab === 'tab1'">
        <el-table
          :data="lists"
          class="table"
          :header-cell-style="{
          backgroundColor: themeColor,
          color: 'white',
          textAlign: 'center'
        }"
          :cell-style="{
          textAlign: 'center'
        }"
        >
          <div slot="empty" class="empty-lists">
            <svg-icon name="search"></svg-icon>
            <span class="empty-text">暂无数据</span>
          </div>
          <el-table-column
            v-for="column in columns.slice(1)" :key="column.label"
            v-bind="column"
          >
            <template v-if="column.prop === 'col5'" #default="{ row }">
              <el-tooltip v-if="row.col5 === null" content="暂无数据">
                <svg-icon name="warning-fill"></svg-icon>
              </el-tooltip>
              <span v-else>{{ row.col5 }}</span>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template v-else>
        <div v-for="(item, index) in objectLists" :key="index">
          <block-title :title="item.label" class="padding-vertical"></block-title>
          <el-table
            class="table" :data="item.lists"
            :header-cell-style="{
              backgroundColor: themeColor,
              color: 'white',
              textAlign: 'center'
            }"
            :cell-style="{
              textAlign: 'center'
            }"
          >
            <el-table-column v-for="column in columns" :key="column.label" v-bind="column">
              <template v-if="column.prop === 'col5'" #default="{ row }">
                <el-tooltip v-if="row.col5 === null" content="暂无数据" placement="top">
                  <svg-icon name="warning-fill" class="font-large"></svg-icon>
                </el-tooltip>
                <span v-else>{{ row.col5 }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </div>
  </custom-dialog>
</template>

<script>
import CustomDialog from '@/components/custom-dialog'
import BlockTitle from '@/components/block-title'

export default {
  name: 'detail-modal',
  components: {
    BlockTitle,
    CustomDialog
  },
  data () {
    return {
      currentTab: 'tab1',
      loading: false,
      lists: [],
      objectLists: [],
      columns: [
        {
          label: '工序及工序单元',
          prop: 'col1'
        },
        {
          label: '用途分类',
          prop: 'col2'
        },
        {
          label: '能源名称',
          prop: 'col3'
        },
        {
          label: '计量单位',
          prop: 'col4'
        },
        {
          label: '指标值',
          prop: 'col5'
        },
        {
          label: '折标系数',
          prop: 'col6'
        },
        {
          label: '折标单位',
          prop: 'col7'
        },
      ],
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    }
  },
  methods: {
    getLists () {
      this.loading = true
      // TODO
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve()
          this.loading = false
          this.lists = [
            {
              col1: '全厂',
              col2: '购进已消费',
              col3: '全厂-一次能源-其它原煤-购进已消费',
              col4: '吨',
              col5: '0',
              col6: '0.7143',
              col7: '吨标准煤/吨',
            },
            {
              col1: '全厂',
              col2: '购进已消费',
              col3: '全厂-二次能源-电力-购进已消费',
              col4: '千瓦时',
              col5: '14400',
              col6: '1.228',
              col7: '吨标准煤/万千瓦时',
            },
            {
              col1: '全厂',
              col2: '外供',
              col3: '全厂-二次能源-热力-外供',
              col4: '百万千焦',
              col5: '1377.81',
              col6: '0.0341',
              col7: '吨标准煤/百万千焦',
            }
          ]
        }, 500)
      })
    },
    getObjectLists () {
      this.loading = true
      // TODO
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve()
          this.loading = false
          this.objectLists = [
            {
              label: '高压配电房',
              lists: [
                {
                  col1: '高压配电房',
                  col2: '购进已消费',
                  col3: '高压配电房-二次能源-电力-购进已消费',
                  col4: '千瓦时',
                  col5: '12040',
                  col6: '1.228',
                  col7: '吨标准煤/万千瓦时',
                }
              ]
            },
            {
              label: '皮带秤',
              lists: [
                {
                  col1: '皮带秤',
                  col2: '购进已消费',
                  col3: '皮带秤-一次能源-其它原煤-购进已消费',
                  col4: '吨',
                  col5: '163.68',
                  col6: '0.7143',
                  col7: '吨标准煤/吨',
                }
              ]
            },
            {
              label: '热力',
              lists: [
                {
                  col1: '热力',
                  col2: '购进已消费',
                  col3: '热力-二次能源-热力-购进已消费量（热力',
                  col4: '百万千焦',
                  col5: null,
                  col6: '0.0341',
                  col7: '吨标准煤/百万千焦',
                }
              ]
            },
            {
              label: '热力',
              lists: [
                {
                  col1: '热力',
                  col2: '外供',
                  col3: '热力-二次能源-热力-外供',
                  col4: '百万千焦',
                  col5: '0',
                  col6: '0.0341',
                  col7: '吨标准煤/百万千焦',
                }
              ]
            },
          ]
        }, 500)
      })
    },
    open () {
      // TODO
      this.currentTab = 'tab1'
      this.getLists()
      this.$nextTick(() => {
        this.$refs.dialog.open()
      })
    },
    onTabClick () {
      this.$nextTick(() => {
        if (this.currentTab === 'tab1') {
          this.getLists()
        } else {
          this.getObjectLists()
        }
      })
    },
  }
}
</script>

<style scoped>

</style>
